Motivation

• Improve mobile navigation by exposing a dedicated menu button in the top navbar to open/close the sidebar.
• Prevent background interaction when the mobile sidebar is open by adding a backdrop and explicit close behaviors.
• Improve mobile rendering for long tables and list items to avoid overflow and clipping.

Description

• Added a menu button to MainNavbar.vue that dispatches a toggle-sidebar CustomEvent via the new toggleSidebar method.
• Updated MainSidebar.vue to render a backdrop on small screens, support open/close state, listen for toggle-sidebar and close-sidebar window events, automatically close on route changes, and expose handleToggleSidebar/closeSidebar methods; also replaced the mobile toggle icon with a close icon.
• Moved the sidebar markup into a wrapper div so the backdrop can be conditionally rendered and cleaned up template indentation and prop formatting.
• Added .sidebar-backdrop styles to the component stylesheet and consolidated existing .main-sidebar rules.
• Added mobile overflow/responsiveness rules to src/scss/extras.scss to make .table and .list-group-item content scrollable or wrap properly on small screens.

Testing

• Ran linting with npm run lint, which completed successfully.
• Ran unit tests with npm run test:unit, and all tests passed.

Codex Task